<template>
  <el-container class="h-screen flex flex-col">
    <el-header class="header h-20 bg-gray-200 flex items-center justify-center">
      教务系统学生管理
    </el-header>
    <el-container class="flex flex-1">
      <el-aside style="width: 200px; background-color: yellow !important" class="h-full">
        <el-menu class="h-full" @select="selectFunc" default-active="1" :unique-opened="true">
          <el-sub-menu index="1">
            <template #title>
              <span class="block p-2">七年级</span>
            </template>
            <el-menu-item v-for="i in 3" :key="i" :index="i.toString()" @click="selectFunc(i)">
              <span class="p-2 hover:bg-blue-100 cursor-pointer">1班</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <span class="block p-2">八年级</span>
            </template>
            <el-menu-item
              v-for="i in 3"
              :key="i"
              :index="(i + 3).toString()"
              @click="selectFunc(i + 3)"
            >
              <span class="p-2 hover:bg-blue-100 cursor-pointer">1班</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <span class="block p-2">九年级</span>
            </template>
            <el-menu-item
              v-for="i in 3"
              :key="i"
              :index="(i + 6).toString()"
              @click="selectFunc(i + 6)"
            >
              <span class="p-2 hover:bg-blue-100 cursor-pointer">1班</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container class="flex-1 flex flex-col">
        <el-header class="h-20 bg-blue-500 flex items-center justify-between px-4">
          <div class="text-white text-xl">{{ desc }}</div>
          <el-button class="bg-blue-500 text-white px-4 py-2 rounded">新增记录</el-button>
        </el-header>
        <el-main class="flex-1 overflow-auto">
          <div class="content p-4">
            <el-table :data="stus">
              <el-table-column prop="name" label="姓名" />
              <el-table-column prop="age" label="年龄" />
              <el-table-column prop="sex" label="性别" />
              <el-table-column prop="date" label="录入日期" />
            </el-table>
          </div>
        </el-main>
        <el-footer class="footer h-7.5 bg-dimgrey text-white text-center"
          >Vue框架搭建, ElementPlus提供组件支持</el-footer
        >
      </el-container>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref } from 'vue'

const desc = ref('七年级1班学生统计')
const stus = ref([
  { name: '小王', age: 14, sex: '男', date: '2020年8月15日' },
  { name: '小张', age: 15, sex: '男', date: '2020年5月15日' },
  { name: '小秋', age: 15, sex: '女', date: '2020年8月15日' },
])

const selectFunc = (index) => {
  const ranks = ['七', '八', '九']
  const rank = ranks[Math.floor((index - 1) / 3)]
  desc.value = `${rank}年级${((index - 1) % 3) + 1}班学生统计`
}
</script>
